// 定义一个查询的参数对象，将来请求数据的时候，
// 需要将请求参数对象提交到服务器
let q = {
  pagenum: 1, // 页码值，默认请求第一页的数据
  pagesize: 10, // 每页显示几条数据，默认每页显示2条
  cate_id: '', // 文章分类的 Id
  state: '' // 文章的发布状态
}

initTable()

let layer = layui.layer
let form = layui.form

// 获取文章列表数据的方法
function initTable() {
  $.ajax({
    method: 'GET',
    url: '/my/article/list',
    data: q,
    success: function (res) {
      if (res.status !== 0) return layer.msg('获取文章列表失败！')

      var htmlStr = template('tpl-table', res)
      $('tbody').html(htmlStr)

      renderPage(res.total)
    }
  })
}

initCate()

// 初始化文章分类的方法
function initCate() {
  $.ajax({
    method: 'GET',
    url: '/my/article/cates',
    success: function (res) {
      if (res.status !== 0) {
        return layer.msg('获取分类数据失败！')
      }
      // 调用模板引擎渲染分类的可选项
      var htmlStr = template('tpl-cate', res)
      $('[name=cate_id]').html(htmlStr)
      // TODO 通过 layui 重新渲染表单区域的UI结构
      form.render()
    }
  })
}

// 给筛选按钮注册submit事件

$('#form-search').on('submit', function (e) {
  // 阻止默认行为
  e.preventDefault()
  // 获取文章分类与状态
  let cate_id = $('#cate_id').val()
  let state = $('#state').val()
  // 修改q对象里面的state与cate_id的值
  q.state = state
  q.cate_id = cate_id
  // 重新获取数据
  initTable()
})

let laypage = layui.laypage

function renderPage(total) {
  laypage.render({
    elem: 'pageBox', //注意，这里的 test1 是 ID，不用加 # 号
    count: total, //数据总数，从服务端得到
    curr: q.pagenum,
    limit: q.pagesize,
    layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'], // 布局效果
    limits: [10, 20, 30, 40, 50],
    jump: (obj, first) => {
      // 将当前被点击的页面值赋值 q.pagenum
      q.pagenum = obj.curr
      // console.log(obj);
      q.pagesize = obj.limit
      //   initTable()
      //   console.log(first);
      if (!first) {
        initTable()
      }
    }
  })
}

$('tbody').on('click', '.btn-delete', function () {
  let leng = $('.btn-delete').length;
  // 获取到文章的 id
  var id = $(this).attr('data-id')
  // 询问用户是否要删除数据
  layer.confirm('确认删除?', { icon: 3, title: '提示' }, function (index) {
    $.ajax({
      method: 'GET',
      url: '/my/article/delete/' + id,
      success: function (res) {
        if (res.status !== 0) {
          return layer.msg('删除文章失败！')
        }
        layer.msg('删除文章成功！')
        if (leng === 1) {
          // 如果 len 的值等于1，证明删除完毕之后，页面上就没有任何数据了
          // 页码值最小必须是 1
          q.pagenum = q.pagenum === 1 ? 1 : q.pagenum - 1
      }
        initTable()
        layer.close(index)
      }
    })
  })
})
